<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router';
import { ElMessage,ElMessageBox  } from 'element-plus';
const route = useRoute();
  // 获取路径参数 'id'
  const id = ref(route.query.id);
  console.log(id.value)
 import {sumbitAccessoryService, uploadService,postEndAccessoryService} from '@/api/Item.js'

//定义接收数据模型
const project=ref({
    id:'',
    name:'',
    category:'',
    declareTIme:'',
    teacher:'',
    members:[],
    annex:[]
})

//失败详情显示项目类型
const textCategory=(category)=>{
    const categoryMap={
        0:'创新训练项目',
        1:"创业训练项目",
        2:"创业实践项目"

    }
    return categoryMap[category]
}
//获取数据
const getData=async()=>{
    let result= await  sumbitAccessoryService(id.value)
    console.log(result.data)
    project.value=result.data
}
getData()

//材料提交
const entityIf = ref(false)
const paperIf = ref(false)
const patentIf=ref(false)
const patentData=ref({
  id:'',
  patent:'',
  privilegedTime:'',
  patentNumber:'',
  projectId:id.value
})
const paperData=ref({
  id:'',
  paper:'',
  publication:'',
  searchType:'',
  accessionNumber:'',
  leadAuthor:'',
  projectId:id.value

})

const entityData=ref({
  id:'',
  entity:'',
  leadAuthor:'',
  projectId:id.value
})


//文件
const fileList = ref([
])
const handleRemove = (file, uploadFiles) => {
  console.log(file, uploadFiles)
}

const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true,
    () => false
  )
}
const onClickUpload = (event) => {
  // 这里可以留空，因为.stop已经处理了阻止冒泡的逻辑
};
//上传附件
// 存储上传后的文件信息
const extractedData = ref([]);
const fileIndex=ref(0)
const handleFileChange=async(file)=>{
   let result=await uploadService(file,2)
   console.log(result.data)
   fileList.value=result.data
  console.log(fileList.value)
}

//保存结项材料
import { useRouter } from 'vue-router';
const router = useRouter();
const postEndAccessory=async()=>{
  let params={
    projectId:id.value,
    proPaper:'',
    proPatent:'',
    proEntity:'',
    annexPlus:fileList.value
  }
  if(paperIf.value=true){
    params.proPaper=paperData.data
  }
  if(patentIf.value=true){
    params.proPatent=patentData.data
  }
  if(entityIf.value=true){
    params.proEntity=entityData.data
  }
  let result=await postEndAccessoryService(params)
  if(result.code===200){
    ElMessage.success("结项材料提交成功")
    router.push({ path: '/project/closing_item' });
  }else{
    ElMessage.error("结项材料提交失败")
  }
}

</script>

<template>
    
     <el-form :model="project" label-position="left"  style="background-color: white;">
                             <el-row>
                                <el-col :span="24">
                                  <h3>项目信息</h3>
                                </el-col>
                              </el-row>
                            <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="项目名称" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ project.name }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="项目编号" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ project.id }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="项目类型" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ textCategory(project.category) }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>

                                    <!-- 第二行 -->
                                    <el-row :gutter="2">
                                      <el-col :span="7">
                                        <el-form-item label="负责人" label-width="80px" v-if="project.members.length > 0" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ project.members[0].name }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="9">
                                        <el-form-item label="学号" label-width="80px" v-if="project.members.length > 0" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ project.members[0].userId }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                      <el-col :span="8">
                                        <el-form-item label="老师" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ project.teacher }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                    </el-row>

                                      <!-- 第三行 -->
                                      <el-row :gutter="5">
                                  <el-col :span="24" v-for="(member, index) in project.members.slice(1)" :key="index" style="font-weight: bold; color: black;">
                                    <el-form-item :label="`成员 ${index + 1}`" label-width="80px" style="font-weight: bold; color: black;">
                                      <el-row>
                                        <el-col :span="15">
                                          <el-form-item label="姓名" label-width="80px" style="font-weight: bold; color: black;">
                                            <el-text class="mx-1">{{ member.name }}</el-text>
                                          </el-form-item>
                                        </el-col>
                                        <el-col :span="15">
                                          <el-form-item label="学号" label-width="80px" style="font-weight: bold; color: black;">
                                            <el-text class="mx-1">{{ member.userId }}</el-text>
                                          </el-form-item>
                                        </el-col>
                                      </el-row>
                                    </el-form-item>
                                  </el-col>
                                </el-row>  
                                <el-row :gutter="5">
                                
                                    <el-col :span="7">
                                        <el-form-item label="项目申报时间" label-width="80px" style="font-weight: bold; color: black;">
                                          <el-text class="mx-1">{{ project.declareTime }}</el-text>
                                        </el-form-item>
                                      </el-col>
                                </el-row> 
                        </el-form>

                        <el-form :model="project" label-position="left"  style="background-color: white;">
                            <el-row>
                            <el-col :span="24">
                              <h3>材料提交</h3>
                            </el-col>
                          </el-row>
                        <el-row>
                            <el-col>
                                <div>
                                    <h4>项目成果</h4>
                                </div>
                                <div>
                                    <el-checkbox v-model="paperIf" label="论文" size="large" />
                                    <el-checkbox v-model="patentIf" label="专著/软著" size="large" />
                                    <el-checkbox v-model="entityIf" label="实物作品" size="large" />
                                  </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col >
                                <h4>论文类</h4>
                            </el-col>
                            <el-form-item label="论文名称">
                                <el-input v-model="paperData.paper"  />
                            </el-form-item>
                            <el-form-item label="发表刊物名称">
                                <el-input v-model="paperData.publication"   />
                            </el-form-item>
                            <el-form-item label="检索类型">
                                <el-input v-model="paperData.searchType"   />
                            </el-form-item>
                            <el-form-item label="检索号">
                                <el-input v-model="paperData.accessionNumber"   />
                            </el-form-item>
                            <el-form-item label="第一作者">
                                <el-input v-model="paperData.leadAuthor"   />
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-col >
                                <h4>专利/软著</h4>
                            </el-col>
                            <el-form-item label="专刊名称">
                                <el-input v-model="patentData.patent"  />
                            </el-form-item>
                            <el-form-item label="授权时间">
                                <el-input v-model="patentData.privilegedTime"   />
                            </el-form-item>
                            <el-form-item label="专利号">
                                <el-input v-model="patentData.patentNumber" />
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-col >
                                <h4>实物</h4>
                            </el-col>
                            <el-form-item label="实物作品类">
                                <el-input v-model="entityData.entity"   />
                            </el-form-item>
                            <el-form-item label="第一作者">
                                <el-input v-model="entityData.leadAuthor"   />
                            </el-form-item>
                        </el-row>
                        
                        </el-form>
                        <el-form-item :model="project" label-position="left"  style="background-color: white;">
                          <div>
                            <el-upload
                                    v-model:file-list="fileList"
                                    class="upload-demo"
                                    multiple
                                    :on-change="handleFileChange"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :before-remove="beforeRemove"
                                    :limit="3"
                                    :on-exceed="handleExceed"
                                    :headers="uploadHeaders"
                                    :data="projectInfo"
                                    :auto-upload="false"
                                    @click.stop="onClickUpload"
                                  >
                                    <el-button type="primary" >上传附件</el-button>
                                </el-upload>
                            </div>
                        </el-form-item>
                        <el-form-item label="确定上传" style="background-color: white; display: flex; align-items: center;" >
                            <el-button type="primary" @click="postEndAccessory">确认</el-button>
                        </el-form-item> 


</template>
<style scoped>

</style>


